<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-08-06 15:34:22
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-08 16:15:30
 * @FilePath: /vue-cesium-electron/src/views/home/control/vc-login-control/login-dialog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
    <el-dialog
    v-model="openLogin"
    width="300"
    align-center
    :show-close="false"
    destroy-on-close
    @close="accountStore.closeTimer"
  >
    
    <template #header>
        <div class="login-header">
            <div class="title">VR·登录</div>
            <div @click="accountStore.changeType">{{accountStore.type == 0 ? '账号登录' : '扫码登录'}}</div>
        </div>
    </template>
    <div class="login-container">
    <!-- 根据 isQrCodeLogin 状态决定显示扫码登录还是账户登录界面 -->
    <div v-if="accountStore.type == 0">
      <div class="login-container-qr">
        <VueQrcode type="image/png" :color="{dark: '#000000', light: '#ffffff'}"  :value="accountStore.qr.url" />
        <div class="login-container-qr-text">
            {{ accountStore.qr.status == 'waiting' ? '请使用手机扫描二维码登录' : accountStore.qr.message}}
        </div>
      </div>
    </div>
    <div v-else class="login-container-account">
        <el-form :model="accountStore.account" label-width="auto">
            <el-form-item label="账户">
                <el-input v-model="accountStore.account.phone" placeholder="请输入账户" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="accountStore.account.password" placeholder="请输入密码" type="password"/>
            </el-form-item>
            <el-form-item >
                <el-button form-type="submit" type="primary" @click="accountStore.onLogin">登录账户</el-button>
            </el-form-item>
        </el-form>
      </div>
  </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import VueQrcode from "vue-qrcode"; 
import {useAccountStore} from '@/stores/account';
const accountStore = useAccountStore();
const openLogin = ref(false);


const open = () => {
    console.log('open-login-dialog')
    openLogin.value = true;
    // accountStore.show = true;
    // if(accountStore.type == 0){
    //     accountStore.getQrCode();
    // }
}
defineExpose({open})
</script>

<style scoped lang="scss">
.login-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    div:first-child{
        font-size: 15px;
        font-weight: bold
    }
    div:last-child{
        font-size: 12px;
        color: #999
    }
}
.login-container{
  &-qr{
    text-align: center;
    width: 100%;
    height: 220px;
    img{
        width: 100%;
        height: 92%;
        object-fit: contain;
    }
  }
  &-account{
    padding-top: 15px;
    width: 100%;
    :deep(.el-button){
        background-color: var(--el-color-primary) !important;
        width: 80%;
        color: #fff !important;
        margin: 5px auto;
    }
  }
}

</style>